<template>
	<comRoot @execAfterToken="loadDataGetFun" :isCurrentTabbarSence="true" :isShowLimitWarm="true">
		<template #nav>
			<comNav :isShow="true" :tabCurrentIndex="tabCurrentIndex">
				<template #left>
					<view class="nav-title" v-if="tabCurrentIndex === 'tabShop' || tabCurrentIndex === 'tabWelfare' || tabCurrentIndex === 'tabBag' || tabCurrentIndex === 'tabUser'">
						<image src="/static/images/public_imgs/mp-logo.png" class="mp-icon" mode="aspectFill" 
							style="width: 197rpx;height: 39rpx;"
						/>
					</view>
				</template>
				<template #right> </template>
			</comNav>
		</template>

		<template #page>
			<view class="tabbar-box flex flex-direction-column flex-full">
				<view style="height: 100%">
					<!-- 首页页面 -->
					<view v-show="tabCurrentIndex === 'tabHome'" style="height: 100%; overflow: hidden">
						<tabHome :tabCurrentIndex="tabCurrentIndex" ref="tabHome" :scene="scene" :isHomeShowing="isHomeShowing"></tabHome>
					</view>
					
					<!-- 商城页面 -->
					<view v-show="tabCurrentIndex === 'tabShop'" style="height: 100%; overflow: hidden">
						<tabShop tabCurrentIndex="tabShop" ref="tabShop"></tabShop>
					</view>
					
					<!-- 福利页面 -->
					<view v-show="tabCurrentIndex === 'tabWelfare'" style="height: 100%; overflow: hidden">
						<tabWelfare 
							tabCurrentIndex="tabWelfare" 
							ref="tabWelfare"
							@getWelfareFlagFun="getWelfareFlagFun"
						></tabWelfare>
					</view>

					<!-- 赏袋页面 -->
					<view v-show="tabCurrentIndex === 'tabBag'" style="height: 100%; overflow: hidden">
						<tabBag tabCurrentIndex="tabBag" ref="tabBag"></tabBag>
					</view>

					<!-- 我的页面 -->
					<view v-show="tabCurrentIndex === 'tabUser'" style="height: 100%; overflow: hidden">
						<tabUser tabCurrentIndex="tabUser" ref="tabUser" :emailTotalCount="emailTotalCount"></tabUser>
					</view>
				</view>

				<!-- Tabbar页面切换 -->
				<view class="tabbar-content">
					<view class="tabbar-content-box relative flex-align-items-center flex-justify-content-around">
						<image 
						v-if="commonConfigs && commonConfigs.domainFrontFileLink"
						:src="`${commonConfigs.domainFrontFileLink}/files/images/tabbar/tabbar-bg.png`" 
						class="bg" mode=""></image>

						<view
							class="tabbar-item relative flex-direction-column"
							v-for="(tab, index) in tabBars"
							:key="tab.id"
							:id="tab.id"
							:data-current="tab.id"
							@click="navTabClickFun"
							:style="{
								width: '100rpx',
								height: '100rpx',
								zIndex: 10,
								bottom: '4rpx',
								transition: 'all 0.2s'
							}"
						>	
							<image class="absolute" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/tabbar/${tab.id}${tabCurrentIndex === tab.id ? '-active' : ''}.png`" style="width: 84rpx; height: 84rpx" />
							
							<!-- 福利页面 - 可领取图标 -->
							<image v-if="commonConfigs && commonConfigs.domainFrontFileLink && tab.id === 'tabWelfare' && isWelfareReceiveIcon" class="receive-icon absolute" :src="`${commonConfigs.domainFrontFileLink}/files/images/common/receive-bg-icon.png`" mode=""></image>
							
							<!-- 我的页面 - 系统通知未读图标 -->
							<view class="email-tips absolute flex-all-center" v-if="tab.id === 'tabUser' && emailTotalCount">
								<image v-if="commonConfigs && commonConfigs.domainFrontFileLink"
									class="bg"
									style="width: 42rpx;height: 42rpx;"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/common/email-num-bg.png`" mode="">
								</image>
								<view class="relative">{{ emailTotalCount }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<comModalPopup v-model="confirmFlagPopup" :isShowCancel="false" :title="confirmTitlePopup"
				style="z-index: 100000000000;"
				:content="confirmContentPopup"
				cancelText="关闭" :confirmText="confirmText" @setSureFun="networkConfirm" />
				
		</template>
		
	</comRoot>
</template>
<script>
	import store from '@/store';
	import { ACTIONS } from '@/store/modules/userStore';
	import { getArrayIndexFun } from '@/setupproject/TOOLS_FUN';
	
	import { 
		getContentHomeApi,
		getUserInfoEnableApi,
		getCouponHomeApi,
	} from '@/setupproject/INTERFACE';

	// Tabbar模块
	import tabHome from './tabHome/tabHome.vue';
	import tabShop from './tabShop/tabShop.vue';
	import tabWelfare from './tabWelfare/tabWelfare.vue';
	import tabBag from './tabBag/tabBag.vue';
	import tabUser from './tabUser/tabUser.vue';
	
	export default {
		components: {
			tabHome, // 首页 页面
			tabShop, // 商城 页面
			tabWelfare, // 福利 页面
			tabBag, // 赏袋 页面
			tabUser, // 我的 页面
		},
		data() {
			return {
				scene: '', // 页面场景 1 全局赏  5飞机赏
				
				tabCurrentIndex: 'tabHome',
				tabBars: [
					{
						name: '首页', // 首页
						id: 'tabHome'
					},
					{
						name: '商城', // 商城
						id: 'tabShop'
					},
					{
						name: '福利', // 福利
						id: 'tabWelfare'
					},
					{
						name: '赏袋', // 赏袋
						id: 'tabBag'
					},
					{
						name: '我的', // 我的
						id: 'tabUser'
					}
				],
				
				// 页面是否显示中
				isHomeShowing: false,

				isShowCoupon: false,
				newpersonCouponData: [],
				
				networkTimer: null,
				confirmFlagPopup: false,
				confirmTitlePopup: '网络提示',
				confirmContentPopup: '当前网络连接不可用,排查手机网络连接是否打开?',
				confirmText: '打开设置',
				
				emailTotalCount: 0, // 系统通知未读数量
				isWelfareReceiveIcon: true, // 福利页面领取图标
				
				isRechagePage: false, // 是否跳转我的页面
			};
		},
		computed: {
			token() {
				return store.getters.token;
			},
			commonNavHeight() {
				return store.getters.commonNavHeight + 'px';
			},
			isNewCouponPopup() {
				return store.getters.isNewCouponPopup;
			},
			commonConfigs() {
				return store.getters.commonConfigs || {};
			},
			userInfo() {
				return store.getters.userInfo;
			},
		},
		watch: {
			tabCurrentIndex: {
				handler(v) {
					this.loadDataGetFun();
				},
				immediate: true
			},
			// APP 监听网络
			confirmFlagPopup(v) {
				if(!v) {
					clearInterval(this.networkTimer);
					// #ifdef APP-PLUS
					plus.runtime.restart();
					// #endif
					// #ifdef H5
					window.location.replace();
					// #endif
				}else{
					this.networkTimer = setInterval(() => {
						this.getNetworkTypeList()
					}, 1000)
				}
			},
		},
		async onLoad({
			scene = 5, // 首页场景： 1 全局赏, 4 开箱, 5飞机赏，默认飞机赏
			tabCurrentIndex = 'tabHome', // 默认首页
			isRechagePage = false, // 是否跳转我的页面
		}) {
			uni.showShareMenu({});
            await (this.scene = scene);
			await (this.tabCurrentIndex = tabCurrentIndex);
			await (this.isRechagePage = Boolean(isRechagePage));
			this.NAV_TITLE_SET_FUN();
		},
		onHide() {
			// 页面是否显示中
			this.isHomeShowing = false;
			
			if(this.networkTimer) {  
				clearInterval(this.networkTimer);  
				this.networkTimer = null;  
			}  
		},
		async onShow() {
			// 页面是否显示中
			this.isHomeShowing = true;
			
			uni.$emit('update', this.tabCurrentIndex);
			
			if(['tabHome', 'tabUser'].includes(this.tabCurrentIndex)) {
				this.getUserInfoEnableFun('email');
			}
			
			if(['tabWelfare'].includes(this.tabCurrentIndex)) {
				let tabWelfare = this.$refs.tabWelfare;
				if(tabWelfare) {
					tabWelfare.loadDataGetFun && (await tabWelfare.loadDataGetFun());
				}
			}
			
			// APP监听 网络
			// #ifdef APP-PLUS
			uni.getSystemInfo({
				success: (system) => {
					if(system.platform === 'ios'){
						this.getNetworkTypeList();
					}
				}
			})
			// #endif
		},
		
		// 分享朋友圈
		onShareTimeline() {
			return {
				title: '旺卡抽赏实现你心中梦想!',
				imageUrl: `${this.commonConfigs.domainFrontFileLink}/files/images/common/new-mp-share.png`,
			}
		},
		
		// 分享微信聊天
		onShareAppMessage(e) {
			if (e.from === 'menu') {
				this.$store.commit('SHARE_INFO_SET_FUN', {
					title: '旺卡抽赏实现你心中梦想!',
					path: `/pages/tabbar/tabbar?tabCurrentIndex=tabHome`,
					imageUrl: `${this.commonConfigs.domainFrontFileLink}/files/images/common/new-mp-share.png`,
					content: '',
					desc: '',
				})
			}
			
			uni.showLoading({
				title: '',
				mask: false
			});
			
			const promise = new Promise(resolve => {
				setTimeout(() => {
					resolve(this.$store.getters.shareObjData)
					uni.hideLoading()
				}, 100)
			})
		
			return {
				promise
			}
		},
		
		methods: {
			getWelfareFlagFun(value) {
				this.isWelfareReceiveIcon = value;
			},
			
			getUserInfoEnableFun(type = 'all') {
				getUserInfoEnableApi ({
					type,
				}).then(res => {
					if(res && res.data) {
						this.emailTotalCount = res.data.email_count || 0;
						
						if(type !== 'all') return;
						this.isWelfareReceiveIcon = (res.data.sign_in_enable || res.data.task_enable || res.data.vip_enable || res.data.day_rebate_enable || false);
					}
				})
			},
			
			// 手机设置：选择网络
			networkConfirm() {
				// #ifdef APP-PLUS
				uni.getSystemInfo({
					success: (sys) => {
						if(sys.platform === 'ios'){
							plus.runtime.openURL("app-settings://");
						}else{
							let runtimeMainAct= plus.android.runtimeMainActivity();
							let IntentContent = plus.android.importClass("android.content.Intent");
							let intentSettings = new IntentContent('android.settings.LOCATION_SOURCE_SETTINGS');
							runtimeMainAct.startActivity(intentSettings);
						}
					}
				})
				// #endif
			},
			
			// 获取手机网络类型
			async getNetworkTypeList() {
				uni.getNetworkType({
					complete: e => {
					  let networkType = e.networkType || 'none';
					  switch (networkType) {
						case 'none':
							this.confirmFlagPopup = true;
							break;
						case '2g':
						case '3g':
						case '4g':
						case '5g':
						case 'wifi':
						case 'ethernet':
						case 'unknown':
							this.confirmFlagPopup = false;
							break;
						default:
							this.confirmFlagPopup = false;
							break;
						}
					}
				});
			},
			
			// tabbar页面切换
			navTabClickFun(e) {
				this.navTabSwitchFun(e.target.dataset.current || e.currentTarget.dataset.current);
			},
			navTabSwitchFun(currentId) {
				if (this.tabCurrentIndex === currentId) return;
				this.tabCurrentIndex = currentId;
				this.NAV_TITLE_SET_FUN();
			},
			
			NAV_TITLE_SET_FUN() {
				let id = this.tabCurrentIndex;
				if (getArrayIndexFun(this.tabBars, 'id', id) !== -1) {
					let commonNavTitle = getArrayIndexFun(this.tabBars, 'id', id) !== -1 ? this.tabBars[getArrayIndexFun(this.tabBars, 'id', id)].name : '';
					store.commit('NAV_TITLE_SET_FUN', commonNavTitle);
				}
			},
			
			async loadDataGetFun() {
				uni.$emit('update', this.tabCurrentIndex);

				// #ifdef MP-WEIXIN
				if (!this.token) return;
				// #endif
				
				await this.NAV_TITLE_SET_FUN();

				const {
					tabHome, // 首页 页面
					tabShop, // 商城 页面
					tabWelfare, // 福利 页面
					tabBag, // 赏袋 页面
					tabUser // 我的 页面
				} = this.$refs;

				switch (this.tabCurrentIndex) {
					case 'tabHome':
						tabHome.loadDataGetFun && (await tabHome.loadDataGetFun());
						break;
					case 'tabShop':
						tabShop.loadDataGetFun && (await tabShop.loadDataGetFun());
						break;
					case 'tabWelfare':
						tabWelfare.loadDataGetFun && (await tabWelfare.loadDataGetFun());
						break;
					case 'tabBag':
						tabBag.loadDataGetFun && (await tabBag.loadDataGetFun());
						break;
					case 'tabUser':
						tabUser.loadDataGetFun && (await tabUser.loadDataGetFun());
						
						// 是否跳转我的页面
						if(this.isRechagePage){
							this.isRechagePage = false;
							tabUser.showInvestMoneySubmit();
						}
						
						break;
				}
			}
		}
	};
</script>

<style lang="scss">
	/* #ifndef APP-PLUS */
	page {
		width: 100%;
		min-height: 100%;
		display: flex;
	}
	/* #endif */
	.tabbar-box {
		overflow: hidden;
		z-index: 100;
		position: relative;
		background-size: 100% 100%;
		height: 100vh;

		.tabbar-content {
			position: fixed;
			z-index: 100;
			width: 100%;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 140rpx;

			.tabbar-content-box {
				width: 100%;
				height: 140rpx;
				white-space: nowrap;
				z-index: 101;
				.tabbar-item-name-txt {
					width: 100%;
					height: 100%;
					font-size: 28rpx;
					font-weight: 500;
					color: #FFFFFF;
				}
				
				.tabbar-item-name-txt-active {
					color: #FFDA4D;
				}
				
				.receive-icon {
					left: -8rpx;
					top: 0rpx;
					width: 73rpx;
					height: 20rpx;
				}
				
				.email-tips {
					line-height: 42rpx;
					text-align: center;
					padding: 0 6rpx;
					left: 0rpx;
					top: 0rpx;
					min-width: 42rpx;
					height: 42rpx;
					font-size: 20rpx;
					color: #fff;
				}
			}
		}
	}
</style>
